<template>
	<view class="statistics">
		<!-- 报餐统计 -->
		<view class="bctj">
			<text class="t-icon t-icon-shixinchaxun text-icon"></text>
			<text class="tjtitle">报餐统计</text>
			<view class="tjtime">
				<picker mode="date" :value="dateValue" fields="day" @change="onDateChange">
					<view class="picker">
						<text>{{ dateValue }}</text>
						<uni-icons type="down" size="20" color="#000"></uni-icons>
					</view>
				</picker>
			</view>
		</view>
		<!-- 餐数 -->
		<view class="bccs">
			<view class="sum">
				<view class="bold-num">{{ breakfastOrdered }}</view>
				<view>今日早餐</view>
			</view>
			<view class="sum">
				<view class="bold-num">{{ lunchOrdered }}</view>
				<view>今日中餐</view>
			</view>
			<view class="sum">
				<view class="bold-num">{{ dinnerOrdered }}</view>
				<view>今日晚餐</view>
			</view>
		</view>

		<!-- 上传菜谱 -->
		<view class="bccp">
			<view class="cptitle">本周菜谱</view>
			<!-- 图片 -->
			<uni-section title="上传本周菜谱" type="line">
				<uni-file-picker v-model="fileList" limit="1" title="上传本周菜谱" @select="selectBackground" @delete="deleteBackground"></uni-file-picker>
			</uni-section>
		</view>

	</view>
</template>

<script>
	import {
		getDietStatistics,
		setDietConfig
	} from "@/proxy/food/food.api.js";
	export default {
		async onLoad() {
			// 获取当前日期
			const currentDate = new Date();
			const year = currentDate.getFullYear();
			const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // getMonth() 返回的是0-11，所以加1
			const day = String(currentDate.getDate()).padStart(2, '0');  // getDate() 返回 1-31，处理成两位格式
			const formattedDate = `${year}-${month}-${day}`;
			this.dateValue = formattedDate;
			await this.getDietStatisticsData(); // 获取活动列表
		},
		data() {
			return {
				dateValue: "",
				dinnerOrdered:"", // 晚餐
				breakfastOrdered:"", // 早餐
				lunchOrdered:"", // 中餐
				fileList: [], // 上传后的图片路径数组
			}
		},
		methods: {
			async onDateChange(e) {
				this.dateValue = e.detail.value;
				await this.getDietStatisticsData();
			},
			// 上传背景图后触发
			async selectBackground(e) {
				uni.showLoading({
					title: '正在上传图片...'
				});
			
				try {
					// 使用 await 等待文件上传完成
					const result = await setDietConfig(e.tempFilePaths[0]);
			
					// 上传成功的逻辑
					this.$toast({
						title: "上传成功",
						icon: "success"
					});
			
					uni.hideLoading();
			
					// const response = JSON.parse(uploadResult.data); // 解析服务器返回的 JSON 数据
					
					// this.fileList = [{
					// 	url: response.msg
					// }];
				} catch (error) {
					// 上传失败的处理
					uni.hideLoading();
					console.error('上传失败', error);
				}
			},
			// 删除背景图
			async deleteBackground(e) {
				this.fileList = [];
				// const tempFilePath = e.tempFilePath;
				
				// try {
				// 	// 使用 await 等待文件上传完成
				// 	const deleFileResult = await postFileDelete({
				// 		fileName:tempFilePath
				// 	});
					
				// 	console.log(deleFileResult);
					
				// } catch (error) {
				// 	// 上传失败的处理
				// 	console.error('删除失败', error);
				// }
			},
			// 获取订餐统计
			async getDietStatisticsData() {
				try {
					const result = await getDietStatistics({
						in:this.dateValue,
						out:this.dateValue,
					});
					console.log("查询报餐统计记录", result)
					if (result.code == 200) {
						const { breakfastOrdered, lunchOrdered, dinnerOrdered } = result.data.list[0];
						this.breakfastOrdered = breakfastOrdered;
						this.lunchOrdered = lunchOrdered;
						this.dinnerOrdered = dinnerOrdered;
						if(this.fileList.length === 0){
							this.fileList.push({
								url:result.data.url
							});
						}
					} else {
						return this.$toast({
							title: result.data.msg,
						});
					}
				} catch (error) {
					console.error("请求失败", error);
					return this.$toast({
						title: "发起失败，请联系管理员！",
						icon: "error",
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #F3F4F6;
	}

	.statistics {
		// background: #fff;
		margin: 0 20rpx;

		.bctj {
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx;
			line-height: 60rpx;
			position: relative;
			// margin-bottom: 20rpx;
			background-color: #FFF;

			.text-icon {
				width: 44rpx;
				height: 44rpx;
			}

			.tjtitle {
				flex: 1;
				font-size: 30rpx;
				color: #303133;
				margin-right: 10rpx;
				margin-left: 15rpx;
			}

			.tjtime {
				align-self: center;
				font-size: 30rpx;
				// color: #606266;
				margin-left: 10rpx;
			}

			&::after {
				position: absolute;
				z-index: 3;
				left: 0;
				right: 0;
				height: 0;
				content: '';
				bottom: 0;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
				border-bottom: 1px solid #E4E7ED;
				border-bottom-width: 1px;
				border-bottom-style: solid;
				border-bottom-color: rgb(228, 231, 237);
			}
		}

		.bccs {
			justify-content: space-around;
			display: flex;
			align-content: center;
			background: #fff;
			// border-radius: 10rpx;
			margin-bottom: 20rpx;

			.sum {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex: 1;
				margin: 30rpx 0;
				font-size: small;
				color: #75787d;

				.bold-num {
					font-weight: bold;
					font-size: 40rpx;
				}
			}
		}

		.bccp {
			// margin: 20rpx;
			// border-radius: 20rpx;
			background-color: #ffffff;
			padding: 20rpx 30rpx;

			.cptitle {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}
			
			.file-picker__box{
				width: 100% !important;
				height: 650rpx !important;
			}
		}
	}
</style>